<template>
  <el-container>
      <el-header>
        <div class="img">
          <img src="../assets/images/明菜.jpg" alt="图片">
        </div>
        <el-menu mode="horizontal" text-color="#fff" background-color="#464241" active-text-color="#f86b36" 
        menu-trigger="click" :unique-opened="true">
          <el-submenu v-for="(item,i) in menulist" :key="item.id" :index="i+1+''">
            <template slot="title"><i :class="iconlist[item.id]"></i>{{item.authName}}</template>
            <el-menu-item  v-for="(item1,ind) in item.children" :key="item1.id" :index="(i+1)+'-'+(ind+1)">
              <router-link :to="item1.path" class="default"><i class="el-icon-s-data"></i>{{item1.authName}}</router-link>
            </el-menu-item>
          </el-submenu>
        </el-menu>
        <el-button type="info" @click="quit">退出</el-button>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
  </el-container>
  <!-- <div>
    
  </div> -->
</template>

<script>
export default {
  created() {
    this.getmenus();
  },
  data() {
    return {
      menulist:[],
      iconlist:{
        "125":"iconfont icon-Customermanagement-fill",
        "103":"iconfont icon-quanxian",
        "101":"iconfont icon-shangpin",
        "102":"iconfont icon-dingdan",
        "145":"iconfont icon-chart-bar"
      },
    };
  },
  methods: {
    quit: function () {
      window.sessionStorage.clear();
      this.$router.push("/Login");
    },
    getmenus:async function() {
      const {data:res}=await this.$http.get("menus");
      this.menulist=res.data;
    }
  },
};
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }
  .default {
    text-decoration: none;
    color: aliceblue;
  }
  .iconfont {
    font-size: 15px;
    margin-right: 5px;
  }
  .el-button {
    position: absolute;
    right: 10px;
    margin: 10px 0;
  }
  .el-container {
    height: 100%;
  }
  .el-header img {
    display: inline-block;
    width: 50px;
    border-radius: 25px;
    vertical-align: middle;
  }
  .img {
    float: left;
    margin: 5px 0 5px 10px;
  }
  .el-header {
    text-align: center;
    background-color: #464241;
    height: 100px;
    padding: 0;
  }
  .el-main {
    background-color: cadetblue;
    padding: 0;
  }
  .el-menu {
    /* width: 120px; */
    display: inline-block;
    margin: 0 10px;
    border: none !important;
  }
  .el-submenu {
    display: inline-block;
  }
</style>